<template>
  <div>
    <div style="height:50px;font-size: 18px;font-weight: 1000;line-height: 50px;text-align: center;border-bottom: 1px solid #ccc;">
        {{ title }}
    </div>
    <div>
        <a-tabs v-model="activeKey" style="width:100%;">
            <a-tab-pane key="1" tab="持仓">
                <div>
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="date"
                        label="市值"
                        align="center"
                        >
                        <template slot-scope="scope">
                            <div style="font-size: 18px;font-weight: bold;color: red;">{{ scope.row.name }}</div>
                            <div style="font-size: 15px;font-weight: bold;color: red;">{{ scope.row.number }}</div>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="盈亏"
                        align="center"

                        >
                        <template slot-scope="scope">
                            <div style="font-size: 18px;font-weight: bold;color: red;">{{ scope.row.yingkun }}</div>
                            <div style="font-size: 15px;font-weight: bold;color: red;">{{ scope.row.baifenbi }}</div>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        align="center"

                        label="持仓/可用">
                        <template slot-scope="scope">
                            <div style="font-size: 18px;font-weight: bold;color: red;">{{ scope.row.keyong }}</div>
                            <div style="font-size: 15px;font-weight: bold;color: red;">{{ scope.row.keyongxia }}</div>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        align="center"

                        label="成本/现金">
                        <template slot-scope="scope">
                            <div style="font-size: 18px;font-weight: bold;color: red;">{{ scope.row.chengben }}</div>
                            <div style="font-size: 15px;font-weight: bold;color: red;">{{ scope.row.now }}</div>
                        </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: center;margin-top: 15px;">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000">
                        </el-pagination>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="最近浏览" force-render>
                <div style="display: flex;align-items: center;padding: 0 10px;margin-bottom: 10px;">
                    <div style="width: 40%;">名称</div>
                    <div style="width: 20%;">最新</div>
                    <div style="width: 20%;">涨幅</div>
                    <div>成交量</div>
                </div>
                <div style="display: flex;align-items: center;justify-content: space-between;height: 40px;padding: 0 10px;border-bottom: 1px solid #e9e8e8;" v-for="(data,index) in listLook" :key="index">
                    <div style="width: 40%;"><span style="font-size: 17px;font-weight: bold;">{{data.title}}</span><span>({{ data.code }})</span></div>
                    <div style="width: 20%;">{{ data.newNumber }}</div>
                    <div style="width: 20%;">{{ data.zhangfu }}%</div>
                    <div style="width: 20%;">{{ data.chengjiao }}万</div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="自选股">
                <div style="display: flex;align-items: center;padding: 0 10px;margin-bottom: 10px;">
                    <div style="width: 40%;">初始</div>
                    <div style="width: 20%;">最新</div>
                    <div style="width: 20%;">涨幅</div>
                    <div>成交量</div>
                </div>
                <div style="display: flex;align-items: center;justify-content: space-between;height: 40px;padding: 0 10px;border-bottom: 1px solid #e9e8e8;" v-for="(data,index) in listLook" :key="index">
                    <div style="width: 40%;"><span style="font-size: 17px;font-weight: bold;">{{data.title}}</span><span>({{ data.code }})</span></div>
                    <div style="width: 20%;">{{ data.newNumber }}</div>
                    <div style="width: 20%;">-{{ data.zhangfu }}%</div>
                    <div style="width: 20%;">{{ data.chengjiao }}万</div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="4" tab="账户详情">
                <div class="accountDetails">
                    <div style="font-size: 12px;">当前权益</div>
                    <div style="font-size: 30px;">10,000,000.00</div>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div class="itemBox" style="border-right: 1px solid #a8d4f8;">
                            <div style="font-size: 15px;">盯市浮盈（率）</div>
                            <div>0.00</div>
                            <div>0.00%</div>
                        </div>
                        <div class="itemBox" style="border-right: 1px solid #a8d4f8;;">
                            <div style="font-size: 15px;">平仓盈亏（率）</div>
                            <div>0.00</div>
                            <div>0.00%</div>
                        </div>
                        <div class="itemBox">
                            <div style="font-size: 15px;">资金使用率</div>
                            <div><a-progress :percent="30" :show-info="false" /></div>
                            <div>30.00%</div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 10px;padding:0 20px;">
                    <div style="font-size: 16px;padding:10px 0;border-bottom: 1px solid rgb(238, 237, 237);border-top:1px solid rgb(238, 237, 237) ;"><i class="el-icon-bank-card"></i> 期货开户：132548643168431863</div>
                </div>
                <div style="margin-top: 10px;padding:0 20px;">
                    <div style="font-size: 16px;"><i class="el-icon-data-analysis"></i> 交易记录：</div>
                    <div style="height: 400px;margin-top: 20px;padding: 0 20px;">
                        <a-list item-layout="horizontal" :data-source="datalist">
                            <template #renderItem="{ item }">
                            <a-list-item>
                                <a-list-item-meta
                                description="这是一条交易记录"
                                >
                                <template #title>
                                    <a href="https://www.antdv.com/">123</a>
                                </template>
                                <template #avatar>
                                    <a-avatar src="https://oss.huangye88.net/live/user/2369698/1512984286088631600-0.jpg" />
                                </template>
                                </a-list-item-meta>
                            </a-list-item>
                            </template>
                        </a-list>
                    </div>
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-size="100"
                        layout="total,prev,  next, jumper"
                        :total="400">
                    </el-pagination>
                </div>
            </div>
            </a-tab-pane>
        </a-tabs>
    </div>
  </div>
</template>

<script>
export default {
    name:'stockAPP',
    data(){
        return{
        title:'东方财富期货',
        activeKey:'2',
        currentPage4:1,
        listLook:[
            {
                title:'铁矿石2405',
                code:'i2405',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },
            {
                title:'螺纹钢2405',
                code:'rb2045',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },
            {
                title:'氧化硅2402',
                code:'ao2045',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },{
                title:'沪铜2401',
                code:'cu045',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },
            {
                title:'铁矿石2405',
                code:'i2405',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },
            {
                title:'螺纹钢2405',
                code:'rb2045',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },
            {
                title:'氧化硅2402',
                code:'ao2045',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },{
                title:'沪铜2401',
                code:'cu045',
                newNumber:'951.0',
                zhangfu:'0.32',
                chengjiao:'16.2'
            },
        ],
        datalist : [
                        {
                            title1: 'Ant Design Title 1',
                        },
                        {
                            title1: 'Ant Design Title 2',
                        },
                        {
                            title1: 'Ant Design Title 3',
                        },
                        {
                            title1: 'Ant Design Title 4',
                        },
                    ],
        tableData:[
            {
                name:'五粮液',
                number:'0.000',
                yingkun:'78.600',
                baifenbi:'0.000%',
                keyong:'100.000',
                keyongxia:'0.000',
                chengben:'31.280',
                now:'32.690'
            },
            {
                name:'酒B',
                number:'3099.100',
                yingkun:'78.600',
                baifenbi:'0.000%',
                keyong:'100.000',
                keyongxia:'0.000',
                chengben:'31.280',
                now:'32.690'
            },
            {
                name:'生物B',
                number:'4896.000',
                yingkun:'78.600',
                baifenbi:'0.000%',
                keyong:'100.000',
                keyongxia:'0.000',
                chengben:'31.280',
                now:'32.690'
            },
        ]
        }
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
}
</script>
<style>
.ant-tabs-nav.ant-tabs-nav-animated {
  width: 100% !important;
}
</style>
<style scoped>


.accountDetails{
    padding: 10px 20px;
    color: #fff;
    width: 95%;
    height: 200px;
    border-radius: 5px;
    margin: 0 auto;
    background: linear-gradient(to right, #138cdc, #61b7d9);
}
.itemBox{
    /* align-items: center; */
    width: 33%;
    min-height: 100px;
    /* border-right: 1px solid red; */
    padding: 10px;
    text-align: center;
}


</style>